<template>
  <div>
    <div class="category_content">
      <div class="search_content" >
        <div class="search_click">
          <span style="color:rgba(0,0,0,0.4);font-size:12px">搜索商品</span>
          <div class="search_icon_content">
            <span class="iconfont "  style="color:white;font-size:12px">&#xe62f;</span>
          </div>
        </div>
      </div>
      <div class="category_head_content">
        <div class="category_head_line"></div>
        <div class="category_head_title_content">
          <span style="font-size:13.5px;line-height:13.5px;font-weight:600;color: black">{{content.title}}</span>
          <span style="font-size:12px;line-height:33px;font-weight:500">{{content.subTitle}}</span>
        </div>
      </div>
      <el-carousel :style="height" :autoplay="false"  arrow="never">
          <el-carousel-item  :style="allHeight" class="swiper-item" v-for="itemName in categorys">
            <div v-for="item in itemName " :class="[item.logo == ''?'category_clickTwo':'category_click']" @click="toRecommend(item)">
              <img v-if="item.logo != ''" :src="item.logo" style="width:100px;height:100px"></img>
            </div>
          </el-carousel-item >
      </el-carousel>
    </div>
  </div>
</template>

<script>
  import {list} from '@/api/navigation';
  import {mapGetters} from 'vuex';
  import utils from '../../../../utils/utils.js'
  export default {
    name: 'magic_category',
    data(){
      return{
        categorys: [],
        allHeight:'',
        height:'',
        tagIds:[],
        pageSize: 2,
        pageNum: 1,
      }
    },
    created(){
      this.loadList()
    },
    computed: {
      ...mapGetters([
        'mchId'
      ])
    },
    props:[
      'content'
    ],
    methods:{
      loadList() {
        var _this = this
        if (!utils.isNull(this.content.tagids)) {
          this.tagIds = this.content.tagids.split(',');
          for (var i = 0; i < _this.tagIds.length; i++) {
            _this.tagIds[i] = parseInt(_this.tagIds[i])
          }
        }
        _this.pageSize = _this.content.rows
        let params=new URLSearchParams()
        params.append('mchId', this.mchId);
        params.append('pageSize',this.pageSize)
        for (var i = 0; i < this.tagIds.length; i++) {
          params.append('tagIds',this.tagIds[i])
        }
        list(params).then(res => {
          res.data.data.forEach(item=>{
            if (utils.isNull(item.logo)){
              item.logo='http://cdnx.hulu.fj.cn/upload/20200624/4.png'
            }
          })
          let len = res.data.data.length;
          let n = 9; //假设每行显示4个
          let lineNum = len % 9 === 0 ? len / 9 : Math.floor((len / 9) + 1);
          let array = [];
          for (let i = 0; i < lineNum; i++) {
            // slice() 方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。
            let temp = res.data.data.slice(i * n, i * n + n);
            array.push(temp);
          }
          if (res.data.data.length < 4) {
            this.height='height:135px'
            this.allHeight = 'height:120px'
          } else if (res.data.data.length > 3 && res.data.data.length < 7) {
            this.height = 'height:255px'
            this.allHeight = 'height:240px'
          } else if (res.data.data.length > 6) {
            this.height = 'height:375px'
            this.allHeight = 'height:360px'
          }
          this.categorys = array
          var objForm = {
            logo:''
          }
          var objFormTwo = {
            logo:''
          }
          this.categorys.forEach(function(item){
            if(item.length == 1 || item.length == 4 || item.length == 7){
              item.push(objForm)
              item.push(objFormTwo)
            }else if(item.length == 2 || item.length == 5 || item.length == 8){
              item.push(objForm)
            }
          })
        })
      },
      toRecommend(data){

      },
    }
  }
</script>

<style scoped>

  .category_content{
    width: 375px;
    margin-top: 10px;
    /*border-radius: 8px;*/
    box-sizing: border-box;
    /*margin-left: 10px;*/
    padding: 10px;
    margin-bottom: 10px;
    background-color: white;
  }
  .category_head_content{
    display: flex;
    flex-direction: row;
    padding-left: 10px;
  }
  /deep/.el-carousel__container{
    height: 0px;
  }
  .category_head_line{
    height: 35px;
    width: 5px;
    background-color: black;
    border-radius: 7.5px;
  }
  .category_head_title_content{
    display: flex;
    height: 30px;
    margin-left: 10px;
    flex-direction: column;
    justify-content: space-between;
  }
  .category_bottom_content{
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    margin-top: 15px;
    max-height: 275px;
    justify-content: space-around;
    /*overflow-x: auto;*/

  }
  .swiper-item{
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    margin-top: 15px;
    /* max-height: 550px; */
    justify-content: space-around;
    align-items: flex-start;

  }
  .category_click{
    width: 100px;
    height: 100px;
    /* margin-right:22px; */
    background-color: rgb(248, 248, 248);
    border-radius:10px;
    margin-bottom: 10px;
  }

  .category_clickTwo{
    width: 100px;
    height: 100px;
    /* margin-right:22px; */
    background-color:white;
    border-radius:10px;
    margin-bottom: 10px;
  }
  .search_content{
    height: 65px;
    width: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  .search_click{
    width: 100%;
    height: 33px;
    padding-left: 10px;
    background-color: #f3f4f6;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items:center;
  }
  .search_icon_content{
    height: 33px;
    border-radius: 8px;
    background-color: #303030;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 33px;
  }
</style>
